<template>
  <main class="app-main">
    <header class="header"></header>
    <section class="left-top">
      <pie-chart :data="pieData" />
    </section>
    <section class="left-bottom">
      <line-chart :data="lineData" />
    </section>

    <section class="right-top">
      <right-top-panel :percentage="totalPercentage" :panel-items="chargingTop4" />
    </section>
    <section class="right-center">
      <bar-chart :bar-data="barData" />
    </section>
    <section class="right-bottom">
      <right-bottom-svg :dots="exceptionData" />
    </section>

    <section class="center">
      <center-svg />
    </section>
    <section class="bottom">
      <bottom-panel :panel-items="dataAnalysisData" />
    </section>
  </main>
</template>

<script setup lang="ts">
import PieChart from '@/views/main/components/pie-chart.vue'
import defaultHomeData from '@/views/main/config/defualt-home-data.json'
import LineChart from '@/views/main/components/line-chart.vue'
import RightTopPanel from '@/views/main/components/right-top-panel.vue'
import BarChart from '@/views/main/components/bar-chart.vue'
// @ts-ignore
import RightBottomSvg from '@/views/main/components/right-bottom-svg.vue'
import BottomPanel from '@/views/main/components/bottom-panel.vue'
import CenterSvg from '@/views/main/components/center-svg.vue'
import { getHomeData } from '@/api/modules/home'

const {
  chargingPile: { data: pieDataCopy = [] } = {},
  processMonitoring: { data: lineDataCopy = [] } = {},
  chargingTop4: { totalPercentage: totalPercentageCopy = 0, data: chargingTop4Copy = [] } = {},
  chargingStatistics: { data: barDataCopy = [] } = {},
  exceptionMonitoring: { data: exceptionDataCopy = [] } = {},
  dataAnalysis: { data: dataAnalysisDataCopy = [] } = {}
} = defaultHomeData

const pieData = ref<any[]>([])
const lineData = ref<any[]>([])
const totalPercentage = ref(0)
const chargingTop4 = ref<any[]>([])
const barData = ref<any[]>([])
const exceptionData = ref<any[]>([])
const dataAnalysisData = ref<any[]>([])
const fillValue = (
  pieDataCopy: any[],
  lineDataCopy: any[],
  totalPercentageCopy: number,
  chargingTop4Copy: any[],
  barDataCopy: any[],
  exceptionDataCopy: any[],
  dataAnalysisDataCopy: any[]
) => {
  pieData.value = pieDataCopy
  lineData.value = lineDataCopy
  totalPercentage.value = totalPercentageCopy
  chargingTop4.value = chargingTop4Copy
  barData.value = barDataCopy
  exceptionData.value = exceptionDataCopy
  dataAnalysisData.value = dataAnalysisDataCopy
}
fillValue(
  pieDataCopy,
  lineDataCopy,
  totalPercentageCopy,
  chargingTop4Copy,
  barDataCopy,
  exceptionDataCopy,
  dataAnalysisDataCopy
)
getHomeData().then((res) => {
  const {
    chargingPile: { data: pieDataCopy = [] } = {},
    processMonitoring: { data: lineDataCopy = [] } = {},
    chargingTop4: { totalPercentage: totalPercentageCopy = 0, data: chargingTop4Copy = [] } = {},
    chargingStatistics: { data: barDataCopy = [] } = {},
    exceptionMonitoring: { data: exceptionDataCopy = [] } = {},
    dataAnalysis: { data: dataAnalysisDataCopy = [] } = {}
  } = res.data
  fillValue(
    pieDataCopy,
    lineDataCopy,
    totalPercentageCopy,
    chargingTop4Copy,
    barDataCopy,
    exceptionDataCopy,
    dataAnalysisDataCopy
  )
  console.log(
    pieDataCopy,
    lineDataCopy,
    totalPercentageCopy,
    chargingTop4Copy,
    barDataCopy,
    exceptionDataCopy,
    dataAnalysisDataCopy
  )
})
</script>

<style lang="scss">
.app-main {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('@/assets/images/bg.png') no-repeat center/100% 100%;

  .header {
    position: absolute;
    top: 21px;
    left: 0;
    right: 0;
    height: 56px;
    background: url('@/assets/images/bg_header.svg') no-repeat center/110% 110%;
  }

  .left-top {
    position: absolute;
    top: 116px;
    left: 16px;
    width: 536px;
    height: 443px;
    background: url('@/assets/images/bg_left-top.svg') no-repeat center/100% 100%;
  }

  .left-bottom {
    position: absolute;
    bottom: 49px;
    left: 16px;
    width: 536px;
    height: 443px;
    background: url('@/assets/images/bg_left_bottom.svg') no-repeat center/100% 100%;
  }

  .right-top {
    position: absolute;
    right: 17px;
    top: 96px;
    width: 519px;
    height: 327px;

    background: url('@/assets/images/bg_right_top.svg') no-repeat center/100% 100%;
  }

  .right-center {
    position: absolute;
    right: 17px;
    top: 443px;
    width: 519px;
    height: 327px;

    background: url('@/assets/images/bg_right_center.svg') no-repeat center/100% 100%;
  }

  .right-bottom {
    position: absolute;
    right: 17px;
    bottom: 49px;
    width: 519px;
    height: 242px;

    display: flex;
    justify-content: center;
    align-items: center;

    background: url('@/assets/images/bg_right_bottom.svg') no-repeat center/100% 100%;
  }

  .center {
    position: absolute;
    right: 540px;
    bottom: 272px;
    width: 823px;
    height: 710px;

    border: 2px solid pink;
  }

  .bottom {
    position: absolute;
    right: 540px;
    bottom: 49px;
    width: 823px;
    height: 209px;

    background: url('@/assets/images/bg_bottom.svg') no-repeat center/100% 100%;
  }
}
</style>
